<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <style>
        body {
            display: block;
            margin: 0
            padding:5px
        }

        .vuefor {
            display: block;
            background: #F8F8F8;
            margin-bottom: 5px;

        }

        .fleft {
            float: left;
        }

        .fright {
            float: right;
        }

        .clear {
            clear: both;
        }

        


        /* 文本 */
        .editor-box .editor-item .content .text-box {
            display: block;
            text-align: center;
        }


        .editor-box .editor-item .content .text-box .input {
            text-align: left;
            clear: both;
            display: block !important;
            vertical-align: middle;
            /* 加了可实现纯textarea功能，不加则像富文本一样可以写入css样式和HTML标签 */
            white-space: pre-wrap;
            /* 必须加，不然移动端有些浏览器无光标 */
            background-color: #fff;
            padding: 5px 0;
        }

        /* 分割线 */
        .editor-box .editor-item .content .line-box {
            display: block;
            text-align: center;
        }

        .editor-box .editor-item .content .line-box hr {
            height: 1px;
            margin: 10px 0;
            border: 0;
            clear: both;
            background-color: #909399;
        }

        /* 图片 */
        .editor-box .editor-item .content .img-box {
            display: block;
            text-align: center;
        }
        .editor-box .editor-item .content .img-box img {
            width: 100%;
        } 
    </style>
</head>

<body>
    <div class="editor-box vue-container">
        <div class="vuefor" v-for="(item,index) in editorData">

            <div class="editor-item" v-if="item.length !=0">
                <div class="content" v-if="item.mytype==1">
                    <!--文字类型的输入框-->
                    <div class="text-box">
                        <div class="input clear"  v-bind:style="initstyle(index)" placeholder="请输入" v-html="item.content"></div>
                    </div>
                </div>

                <div class="content" v-if="item.mytype==2" style="">
                    <!--图片-->
                    <div class="img-box">
                        <img v-if="item.default==1" v-bind:src="item.content" alt="" />
                        <img class="loading" v-if="item.default==0" src="" @click="changeCoverImg($event,index)"
                             alt="" />
                      
                    </div>
                </div>

                <div class="content" v-if="item.mytype==3">
                    <!--分割线-->
                    <div class="line-box">
                        <hr>
                    </div>
                </div>


                <div class="clear" style=""></div>
            </div>
        </div>
 
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    var pageData = {
        editorData: [{"mytype":1,"content":"标题","style":{"font_size":"24px","font_weight":800,"text_decoration":"","text_align":"center","color":"#fa3534"}},{"mytype":1,"content":"副标题","style":{"font_size":"16px","font_weight":"","text_decoration":"","text_align":"right","color":"#c0c4cc"}},{"mytype":3,"content":""},{"mytype":2,"content":"","default":1},{"mytype":1,"content":"正文内容第一行\n第二行\n超长超长超长超长超长超长超长超长超长超长超长超长超长超长","style":{"font_size":"18px","font_weight":"","text_decoration":"","text_align":"left","color":"#303133"}},{"mytype":1,"content":"居中第一行\n居中第二行","style":{"font_size":"18px","font_weight":"","text_decoration":"","text_align":"center","color":"#303133"}},{"mytype":2,"content":"","default":1},{"mytype":1,"content":"靠右第一行\n靠右第行行","style":{"font_size":"18px","font_weight":"","text_decoration":"","text_align":"right","color":"#303133"}}]
        
    };

    //初始化vue
    var vmMenu = new Vue({
        el: '.vue-container',
        data: pageData,


        methods: {
            
            initstyle: function (index) {
                var stylestr = "";
                var data = pageData.editorData[index].style;
                Object.keys(data).map(function (v, i, a) {
                    stylestr += v.replace('_', '-') + ':' + data[v] + ';'
                })
                return stylestr;
            },

            //一个用于阻止冒泡的事件
            stopclick: function () {},
        },
        //实例被调用后
        created: function () {

        }


    });

</script>

</html>